<template>
  <div class="resource-order">
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      :show-close="true"
      :append-to-body="true"
      :class="{'mobile-el-dialog': showMobilePage}"
      :close-on-click-modal="true"
      class="large-common-dialog-size resource-order-dialog"
    >
      <Title title="订单列表" style="margin-bottom:18px;"/>
      <div class="order-list">
        <orderFilter
          ref="filterRef"
          :is-mobile="showMobilePage"
          :dialog-visible="dialogVisible"
          style="margin-bottom:10px;"
          @searchData="getData" />
        <div class="content">
          <orderTable
            ref="settleOrderTable"
            :loading="loading"
            :only-show-select="false"
            :order-list="orderList"
            @closeDialog="isClose" />
        </div>

        <div class="foot-container">
          <div class="opeator">&nbsp;</div>
          <el-pagination
            v-if="orderList.total > 0"
            :current-page="page"
            :page-size="perPage"
            :total="orderList.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Title from '@/components/Title';
import orderFilter from './dataFilter';
import orderTable from './table';
import { moneyFilter } from '@/filters/number';
import { getOrderList } from '@/api/resource';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import { mapState } from 'vuex';

export default {
  components: {
    Title,
    orderFilter,
    orderTable },
  filters: { moneyFilter },
  props: {
    // 资源id
    resourceMediumId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: false,
      dateRange: [],
      paramsObj: {
        supplierName: '',
        clientCompany: ''
      },
      loading: false,
      page: 1,
      perPage: 20,
      orderList: {
        items: [],
        total: 0
      },
      mediumId: 0,
      rangeKeyArr: [{
        attr: 'orderTime',
        start: 'orderStartTime',
        end: 'orderEndTime',
        type: 'time'
      }, {
        attr: 'taxAmount',
        start: 'taxAmountStart',
        end: 'taxAmountEnd',
        type: 'number'
      }]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  watch: {
    dialogVisible(value) {
      if (value) {
        this.getData(true);
      }
    }
  },
  methods: {
    getData(reset = false) {
      if (reset) this.page = 1;
      const params = this.$refs.filterRef ? JSON.parse(JSON.stringify(this.$refs.filterRef.paramsObj)) : {};
      params.resourceMediumId = this.resourceMediumId;
      params.page = this.page;
      params.perPage = this.perPage;
      params.processArr = params.processArr ? params.processArr.join(',') : '';
      // 时间处理
      /* if (params.orderTime && params.orderTime.length === 2) {
        params.orderStartTime = Math.round(params.orderTime[0] / 1000);
        params.orderEndTime = Math.round(params.orderTime[1] / 1000);
      }
      if (params.taxAmount && params.taxAmount.length === 2) {
        params.taxAmountStart = params.taxAmount[0] || params.taxAmount[0] === 0 ? Number(params.taxAmount[0]) : null;
        params.taxAmountEnd = params.taxAmount[1] || params.taxAmount[1] === 0 ? Number(params.taxAmount[1]) : null;
      }
      delete params.orderTime;
      delete params.taxAmount; */
      paramsRangeFormat(this.rangeKeyArr, params);
      this.loading = true;
      getOrderList(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.orderList = res.data;
        }
      }).catch(() => {
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getData(true);
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getData();
    },
    isClose(val) {
      this.closeDialog();
    },
    openDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
      this.dateRange = [];
      this.orderList = {
        items: [],
        total: 0
      };
      this.page = 1;
    },
    handleTabClick(e) {
      this.switchSelect();
    }
  }
};
</script>

<style lang="scss" scoped>
.order-list {
  height: 435px;
  @include scrollBar($x: hidden, $y: auto);
}

.order-list {
  position: relative;
  padding-top: 5px;
}
.foot-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
  height: 48px;
  .opeator {
    flex:1;
  }
}
</style>
<style lang="scss">
.resource-order-dialog {
  .el-dialog  {
    .el-dialog__body {
      padding-bottom: 15px !important;
    }
  }
}
</style>
